<template>
  <div class="app-container">
    <div class="app-title">
      <span>工资停发</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="width:700px;height:15px;margin-top:-10px"
          >
            <el-radio-button
              label="0"
              name="isNoSubmit"
            >可停发</el-radio-button>
            <el-radio-button
              label="1"
              name="submit"
            >已停发</el-radio-button>

          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <el-col style="text-align:right;margin-top:-3px;" :span="16">
          <el-button
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            @click="Query"
          >
            查询
          </el-button>
          <el-button
            v-if="activeName === '0'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            @click="isHandleEdit"
          >
            工资停发
          </el-button>
          <el-button
            v-if="activeName === '1'"
            size="small"
            class="filter-item"
            style="margin-left:10px;"
            type="primary"
            @click="isHandleAdd"
          >
            工资恢复
          </el-button>

        </el-col>
      </div>
    </el-row>
    <!-- 图片的显示位置样式 -->
    <div>
      <div>
        <div style="margin-left:17px; position:absolute; margin-top:-36px">
          <img style="width:16px; height:16px;" :src="allimgSrc">
        </div>
        <div style="margin-left:105px; position:absolute; margin-top:-36px">
          <img style="width:16px; height:16px;" :src="Processedimg">
        </div>
      </div>
    </div>
    <div ref="box" class="box">
      <stopPaySalaryChildrenTable
        :key="timer"
        ref="chil"
        :tab-pane="activeName"
      />

      <Drag ref="icon" />
    </div>
  </div>

</template>
<script>
import stopPaySalaryChildrenTable from '@/views/unitSalaryReport/children/stopPaySalaryChildren'
import Drag from '@/components/Drag'
export default {
  name: 'StopPaySalary',
  components: { stopPaySalaryChildrenTable, Drag },
  data() {
    return {
      timer: '',
      activeName: '0',
      allimgSrc: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/processed.png')

    }
  },
  // 图片显示
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.allimgSrc = require('@/assets/images/select.png')
        this.Processedimg = require('@/assets/images/processed.png')
      } else {
        this.allimgSrc = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/blue.png')
      }
    }
  },
  created() {},
  methods: {
    // 查询
    Query() {
      console.log(111)
      this.$refs.chil.query()
    },
    //  工资停发
    isHandleEdit() {
      this.$refs.chil.handleEdit()
    },
    // 工资恢复
    isHandleAdd() {
      this.$refs.chil.handleAdd()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/border.scss"; /*引入公共样式*/
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}

</style>
